<template>
  <div class="input-group date">
    <div class="input-group-addon">
      <i class="fa fa-calendar"></i>
    </div>
    <input type="text" class="form-control pull-right" :id="name" :name="name" :value="value">
  </div>
</template>

<script>
  export default {
    props: {
      name: {
        type: String,
        default: "date"
      },
      value: {
        type: String,
        default: function () {

          var date = new Date();
          var year = date.getFullYear();
          var month = date.getMonth() + 1;
          var day = date.getDate();
          var seperator = "-";

          if (month < 10) {
             month = "0" + month;
          }

          if (day < 10) {
             day = "0" + day;
          }

          return date.getFullYear() + seperator + month + seperator + day;
        }
      }
    },
    mounted: function () {
      $(".date input").datepicker({
        autoclose: true,
        format: 'yyyy-mm-dd',
        todayHighlight: true
      });
    }
  }
</script>